<template>
  <el-form :model="form" label-width="auto" style="width: 100%;">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="角色名称">
          <el-input v-model="form.rolename" placeholder="请输入角色名称查询" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="备注">
          <el-input v-model="form.desc" placeholder="请输入备注查询" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="getROleList">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <br />
  <el-button plain @click="OPEN">
    新增
  </el-button>

  <el-dialog v-model="forma.isno" title="新增【保存之后请继续分配功能】" width="500">
    <el-form :model="forma">
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-input v-model="forma.name" autocomplete="off" placeholder="请输入角色名称" />
      </el-form-item>

      <el-form-item label="数据类型" :label-width="formLabelWidth">
        <el-select v-model="forma.type" placeholder="请输入数据类型">
          <el-option label="本机数据" value="本机数据" />
          <el-option label="个人数据" value="个人数据" />
        </el-select>
      </el-form-item>
      <el-form-item label="价格屏蔽" :label-width="formLabelWidth">
        <el-select v-model="forma.value" placeholder="请输入价格屏蔽">
          <el-option label="屏蔽首页采购价" value="屏蔽首页采购价" />
          <el-option label="屏蔽首页零售价" value="屏蔽首页零售价" />
          <el-option label="屏蔽首页采购价" value="屏蔽首页采购价" />
          <el-option label="屏蔽单据采购价" value="屏蔽单据采购价" />
          <el-option label="屏蔽单据零售价" value="屏蔽单据零售价" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="forma.description" autocomplete="off" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="forma.sort" autocomplete="off" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="AddRole1">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>


  <br />
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="#" width="55">
      <template v-slot="scope">
        {{ scope.$index + 1 }} <!-- 自增数字，从1开始 -->
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template v-slot="scoped">
        <div class="operation-text">
          <el-button type="text" @click="assignFunction(scoped.row.roleid)">分配功能</el-button>
          &nbsp;
          <!-- <el-button type="text" @click="assignButton(scoped.row)">分配按钮</el-button>
          &nbsp;|
          <el-button type="text" @click="editRow(scoped.row)">编辑</el-button>
          &nbsp;|
          <el-button type="text" @click="deleteRow(scoped.row.roleid)">删除</el-button> -->
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="角色名称" />
    <el-table-column prop="type" label="数据类型" />
    <el-table-column prop="value" label="价格屏蔽" />
    <el-table-column prop="description" label="备注" />
  </el-table>
  <el-dialog v-model="formb.isno" title="分配功能【分配之后请继续分配按钮】" width="500">
    <el-form :model="formb">

      <!-- <el-tree-v2
    style="max-width: 600px"
    :data="formb.data"
    :props="props"
    show-checkbox
    :height="208"
  /> -->
      <el-tree-select v-model="formb.data" :data="permissiondata" multiple :render-after-expand="false" show-checkbox
        check-strictly check-on-click-node style="width: 240px" class="hide-text" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" @click="AddRolePermissionsAction">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 4, 5]"
    :background="true" layout="total, sizes, prev, pager, next, jumper" :total="form.pageTotal"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { RoleList, AddRole, GetRolePermisssionById, GetPermission, AddPermission } from '@/api/loglists/index'
import { type RoleListData, type AddRoleData, type AddPerssionData } from '@/api/loglists/type'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { fa } from 'element-plus/es/locales.mjs'
const formLabelWidth = '140px'
const route = useRoute()
const router = useRouter()
const form = ref<RoleListData>({
  rolename: '',
  desc: '',
  pageIndex: 1,
  pageSize: 10,
  pageTotal: 0,
  pageCount: 0
})
const forma = ref<AddRoleData>({
  isno: false,
  roleid: 0,
  name: '',
  type: '',
  value: '',
  description: '',
  enabled: null,
  sort: '',
  tenant_id: null,
  delete_flag: false
})
const formb = ref<AddPerssionData>({
  isno: false,
  data: null,
  roleid: null
})
onMounted(() => {
  getROleList()
  showRolePermissions()
})
const tableData = ref([])
const getROleList = async () => {
  await RoleList(form.value).then(function (res) {
    console.log(res.data.data);
    tableData.value = res.data.data
    form.value.pageCount = res.data.pageCount
    form.value.pageTotal = res.data.pageTotal
  })
}

const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getROleList()

}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form.value.pageIndex = val
  getROleList()
}
const props = {
  value: 'id',
  label: 'label',
  children: 'children',
}
const getRoleListById = async (val: any) => {
  await GetRolePermisssionById(val).then(function (res) {
    const existingValues = new Set(formb.value.data); // 假设这是已有的值
    const childrenValues = res.data.flatMap((d: any) =>
      [d.value, ...d.children.map((child: any) => child.value)]
    ).filter((value: any) => !existingValues.has(value));



    console.log(childrenValues);

    formb.value.data = childrenValues
  })
}
const assignFunction = (val: any) => {
  formb.value.isno = true;
  formb.value.roleid = val
  getRoleListById(val)

}


const permissiondata = ref([])
const showRolePermissions = async () => {
  await GetPermission().then(function (res: any) {
    permissiondata.value = res.data
  })
}


const AddRolePermissionsAction = async () => {
  console.log(formb.value.data);

  await AddPermission(formb.value).then(function (res) {
    console.log(res.data);
    if (res.data > 0) {
      formb.value.isno = false;
    }
  })
}
const assignButton = () => {

}
const editRow = () => {

}
const deleteRow = () => {

}
const OPEN = () => {
  forma.value.isno = true;
}
const AddRole1 = async () => {
  await AddRole(forma.value).then(function (res) {
    console.log(res.data);
    if (res.data > 0) {
      forma.value.isno = false;
      getROleList()
    }
  })
}

</script>

<style>
.operation-text {
  white-space: nowrap;
  /* Prevent line breaks */
}

.hide-text .el-input__inner {
  color: transparent;
  /* 让文本变得不可见 */
}
</style>